<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
    <!-- 表单 -->
    <el-card>
      <span style="font-size: 13px">项目编号：</span>
      <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

      <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
      <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


      <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
      <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择" style="width: 130px">
        <el-option label="货物类" value="1"></el-option>
        <el-option label="服务类" value="2"></el-option>
        <el-option label="工程类" value="3"></el-option>
      </el-select>

      <span style="font-size: 13px;margin-left: 3%">归档审批状态：</span>
      <el-select v-model="projectSearch.archiveApproveStatus" placeholder="请选择" style="width: 130px">
        <el-option label="审批通过" value="审批通过"></el-option>
        <el-option label="未审批" value="未审批"></el-option>
        <el-option label="退回" value="退回"></el-option>
      </el-select>

      <div style="display: inline;margin-left: 10%">
        <el-button class="search-button" size="mini" @click="searchCondition" type="primary">查询</el-button>
        <el-button size="mini" @click="clearMes">清空查询</el-button>
      </div>
    </el-card>

    <!-- 表格 -->
    <div style="margin-top: 10px;margin-bottom: 10px">
      <el-table
          :data="projectTable"
          style="width: 100%"
          v-loading="loading"
          border
      >
        <el-table-column prop="projectCode" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="purchaseCategoryName" label="采购类别"></el-table-column>
        <el-table-column prop="purchaseMethod" label="采购方式"></el-table-column>
        <el-table-column prop="budget" label="预算金额"></el-table-column>
        <el-table-column prop="archiveApproveStatus" label="归档审批状态"></el-table-column>
        <el-table-column prop="archiveApproveTime" label="审批通过时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{$index,row}">
            <!-- 在这里添加操作按钮 -->
            <el-button @click="goToManager(row)">归档审批</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="projectTable.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { selectAllArchive} from "@/api/archive/archive";
import { query } from "@/api/archiveApproval/archiveApproval"

export default {
  data() {
    return {
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
        archiveApproveStatus:"",
      },
      projectTable: [
        //测试数据，上线前请删除
        // {
        //   projectCode: 'A01001',
        //   projectName: '采购项目1',
        //   purchaseCategoryName: '货物类',
        //   purchaseMethod: '线下',
        //   budget: 10.04,
        //   archiveApproveStatus: '审批通过',
        //   archiveApproveTime: '2023-07-02 10:10:21',
        //   // 添加"操作"属性，值为"潜在供应商管理"
        //   action: '潜在供应商管理',
        // },
      ],
      projectList: [],
      currentPage: 1,
      pageSize: 20,
      loading: true, // 修改是否显示加载页面
      total: 0,


    };
  },

  mounted() {
    this.onload()
  },

  methods: {
    //清空查询
    clearMes() {
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
    },


    // 请求获得返回的项目
    async onload(){
      let res = await selectAllArchive()
      if (res){
        this.loading = false
      }
      if (res.data.code === 200){
        this.projectTable = res.data.data.projectVos;
        this.total = res.data.data.total
      }else {
        this.projectTable = [];
        this.total = 0;
        this.$message.error(res.data.msg);
      }
    },

    //分页
    loadtable(index) {
      var i = 0;
      this.projectList = [];
      for (i = 0; i < this.pagesize; i++) {
        if ((index - 1) * this.pagesize + i === this.total) {
          break;
        }
        this.projectList.push(this.projectTable[(index - 1) * this.pagesize + i]);
      }
      console.log("table", this.projectTable, "list", this.projectList);
    },

    //分页
    handleSizeChange(val){
      this.pageSize = val;
      this.loadtable();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.loadtable()
    },

    // 输入关键字查询
    async searchCondition() {
      if (!this.projectSearch.projectCode) {
        this.$message.warning("请至少输入项目编号");
        return;
      }
      // 构建查询参数
      let theData = {
        projectCode: this.projectSearch.projectCode,
      };

      if (this.projectSearch.projectName) {
        theData.projectName = this.projectSearch.projectName;
      }
      if (this.projectSearch.purchaseCategoryId) {
        theData.purchaseCategoryId = this.projectSearch.purchaseCategoryId;
      }
      if (this.projectSearch.archiveApproveStatus) {
        theData.archiveApproveStatus = this.projectSearch.archiveApproveStatus;
      }

      // 调用查询接口
      try {
        let res = await query(theData); // 调用query接口，传入查询参数
        if (res.data.code === 200) {
          this.projectTable = res.data.data.projectVos;
          this.total = this.projectTable.length;
          this.currentPage = 1; // 重置当前页码
          this.loadtable()
        } else {
          this.projectTable = [];
          this.total = 0;
          this.$message(res.data.msg);
        }
      } catch (error) {
        console.error("Error querying data:", error);
        this.$message.error("查询数据时出错");
      }
    },

    goToManager(row) {
        this.$router.push({
          name: 'archiveApproveManger',
          params: {
            projectCode: row.projectCode,
            projectName: row.projectName,
            categoryName: row.categoryName,
            budget: row.budget,
            archiveSubmitStatus : row.archiveSubmitStatus,
            archiveSubmitTime:row.archiveSubmitTime,
            archiveApproveStatus: row.archiveApproveStatus,
            archiveApproveTime: row.archiveApproveTime,
            projectId : row.projectId,
          },
        });
    },
  }
};
</script>

<style>

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
